import {designPage, onMounted, useRefs} from "@peryl/react-compose";
import {usePageService} from "../../../modules/micro/usePageService";
import {DataStatisticHead} from "../common/data-statistic-head";
import {i18n, Icon} from "plain-design";
import {useEchartsColor} from "../../../components/useEchartsColor";

export default designPage(() => {

  const { microApp } = usePageService();
  const { bg1, color1, color6, text2 } = useEchartsColor();

  const { onRef, refs } = useRefs({ el: HTMLDivElement });

  onMounted(async () => {

    const echarts = await microApp.resource.load('echarts', window);

    let builderJson = {
      "all": 10887,
      "charts": {
        "radar": 2090,
        "heatmap": 1762,
        "treemap": 1593,
        "graph": 2060,
        "boxplot": 1537,
        "parallel": 1908,
        "gauge": 2107,
      },
      "components": {
        "markPoint": 3419,
        "markLine": 2984,
        "timeline": 2739,
        "dataZoom": 2744,
        "visualMap": 2466,
        "toolbox": 3034,
        "polar": 1945
      },
      "ie": 9743
    } as any;

    let downloadJson = {
      "echarts.min.js": 17365,
      "echarts.simple.min.js": 4079,
      "echarts.common.min.js": 6929,
      "echarts.js": 14890
    } as any;

    let themeJson = {
      "dark.js": 1594,
      "infographic.js": 925,
      "shine.js": 1608,
      "roma.js": 721,
      "macarons.js": 2179,
      "vintage.js": 1982
    } as any;

    const option = {
      tooltip: {},
      title: [
        {
          text: '在线构建',
          subtext: '总计 ' + builderJson.all,
          left: '25%',
          textAlign: 'center'
        }, {
          text: '各版本下载',
          subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
            return all + downloadJson[key];
          }, 0),
          left: '75%',
          textAlign: 'center'
        }, {
          text: '主题下载',
          subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
            return all + themeJson[key];
          }, 0),
          left: '75%',
          top: '50%',
          textAlign: 'center'
        }],
      grid: [
        {
          top: '25',
          width: '50%',
          bottom: '45%',
          left: 10,
          containLabel: true
        }, {
          top: '55%',
          width: '50%',
          bottom: 0,
          left: 10,
          containLabel: true
        }],
      xAxis: [
        {
          type: 'value',
          max: builderJson.all,
          splitLine: {
            show: false
          }
        }, {
          type: 'value',
          max: builderJson.all,
          gridIndex: 1,
          splitLine: {
            show: false
          }
        }],
      yAxis: [
        {
          type: 'category',
          data: Object.keys(builderJson.charts),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }, {
          gridIndex: 1,
          type: 'category',
          data: Object.keys(builderJson.components),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }],
      series: [
        {
          type: 'bar',
          stack: 'chart',
          z: 3,
          label: {
            position: 'right',
            show: true,
            color: text2,
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1, 0, 0, 0,
              [
                { offset: 0, color: color1 },
                { offset: 1, color: color6 }
              ]
            )
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
          })
        }, {
          type: 'bar',
          stack: 'chart',
          silent: true,
          itemStyle: {
            color: bg1
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
          })
        }, {
          type: 'bar',
          stack: 'component',
          xAxisIndex: 1,
          yAxisIndex: 1,
          z: 3,
          label: {
            position: 'right',
            show: true,
            color: text2,
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1, 0, 0, 0,
              [
                { offset: 0, color: color1 },
                { offset: 1, color: color6 }
              ]
            )
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
          })
        }, {
          type: 'bar',
          stack: 'component',
          silent: true,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            color: bg1
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.all - builderJson.components[key];
          })
        }, {
          type: 'pie',
          radius: [0, '30%'],
          center: ['75%', '25%'],
          label: {
            color: text2,
          },
          data: Object.keys(downloadJson).map(function (key) {
            return {
              name: key.replace('.js', ''),
              value: downloadJson[key]
            };
          })
        }, {
          type: 'pie',
          radius: [0, '30%'],
          center: ['75%', '75%'],
          label: {
            color: text2,
          },
          data: Object.keys(themeJson).map(function (key) {
            return {
              name: key.replace('.js', ''),
              value: themeJson[key]
            };
          })
        }]
    };

    const ins = echarts.init(refs.el);
    ins.setOption(option);
  });

  return () => (
    <div className="keyword-structure">
      <DataStatisticHead icon="pi-share-alt" title={i18n.$intl('page.dataStatistic.keywordDistribution').d("关键词分布")}>
        <Icon icon="pi-menu" status="primary"/>
      </DataStatisticHead>
      <div ref={onRef.el} className="keyword-structure-el"/>
    </div>
  );
});
